<template>
  <div class="box">
    <header-tit img="orderT.png" tit="分类管理"/>
    <el-form class="from">
      <el-form-item label="名称搜索">
        <el-input class="fi" v-model="filter.mobile"></el-input>
      </el-form-item>
      <el-form-item label="分类查询">
        <el-select class="fi" filterable placeholder="请选择">
          <el-option></el-option>
        </el-select>
      </el-form-item>
      <el-button type="primary" @click="$router.push("classManageDetail")">新增</el-button>
    </el-form>

    <el-table :data="tableData3" style="width: 100%">
      <el-table-column prop="no" label="类型"></el-table-column>
      <el-table-column prop="header.userName" label="名称"></el-table-column>
      <el-table-column label="图片">
        <template slot-scope="scope">
          <img :src="scope.row.icon" alt>
        </template>
      </el-table-column>
      <el-table-column prop="header.campusName" label="是否热门"></el-table-column>
      <el-table-column prop="ID" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="">删除</el-button>
          <el-button size="mini" @click="$router.push('classManageDetail?id='+scope.row.id)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pat">
      <el-pagination
        v-if="count"
        background
        layout="prev, pager, next"
        @current-change="currentPage"
        :page-size="filter.limit"
        :total="count"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { Order } from "api";

export default {
  data() {
    return {
      tableData3: [],
      filter: {
        offset: 0,
        limit: 10,
        status: "",
        orderNo: "",
        campusId: "",
        mobile: ""
      },
      ids: [],
      count: 0
    };
  },

  watch: {
    "filter.status"() {
      this.filter.offset = 0;
      this.querySchool();
    }
  },

  created() {
    // this.querySchool()
  },

  methods: {
    async querySchool() {
      let res = await Order.querySchool(this.filter);
      this.tableData3 = res.data;
      this.count = res.count;
    },

    currentPage(e) {
      this.filter.offset = e * this.filter.limit - 1;
      this.querySchool();
    },

    handleSelectionChange(e) {
      this.ids = e.map(item => item.id);
    }

    // pageChange (e) {
    //   this.filter.offset = this.filter.offset + this.filter.limit - 1
    //   this.querySchool()
    // },

    // pageChangePre (e) {
    //   this.filter.offset = this.filter.offset - this.filter.limit
    //   this.querySchool()
    // }
  }
};
</script>
<style lang="less" scoped>
.box {
  padding-bottom: 100px;
}
.from {
  overflow: hidden;
  margin-top: 30px;
  .el-form-item {
    width: 233px;
    float: right;
  }
  .fi {
    width: 150px;
  }
  .btn {
    width: 100px;
    height: 40px;
    margin-right: 20px;
    float: right;
  }
}
.top {
  margin: 20px 0;
  background: white;
  overflow: hidden;
  .add {
    color: #656565;
    font-size: 15px;
    float: right;
    margin-right: 20px;
    div {
      float: left;
      margin-left: 15px;
    }
    span {
      margin: 0 5px;
    }
  }
}
.pat {
  margin-top: 40px;
  text-align: center;
}
.el-radio.is-bordered + .el-radio.is-bordered {
  margin: 0;
}
.el-radio {
  margin-top: 16px;
}
</style>
